<script setup lang="ts">
import {useRouter} from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue"
import {ref, onMounted, onBeforeUnmount} from 'vue';
import * as echarts from 'echarts';
import chinaJson from '@/assets/maps/china.json';

const activeNav = ref('1') // 默认选中首页
const activeSubNav = ref('0')


// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};


// 注册中国地图
echarts.registerMap('china', chinaJson);

const chartContainer = ref(null);
let chartInstance: echarts.ECharts | null = null;

const provinceInfo = {
  // 直辖市（使用地图数据中的完整名称）
  municipalities: {
    '北京市': '北京',
    '天津市': '天津',
    '上海市': '上海',
    '重庆市': '重庆'
  },
  // 普通省份省会（使用地图数据中的完整省份名称）
  capitals: {
    '河北省': '石家庄',
    '山西省': '太原',
    '辽宁省': '沈阳',
    '吉林省': '长春',
    '黑龙江省': '哈尔滨',
    '江苏省': '南京',
    '浙江省': '杭州',
    '安徽省': '合肥',
    '福建省': '福州',
    '江西省': '南昌',
    '山东省': '济南',
    '河南省': '郑州',
    '湖北省': '武汉',
    '湖南省': '长沙',
    '广东省': '广州',
    '海南省': '海口',
    '四川省': '成都',
    '贵州省': '贵阳',
    '云南省': '昆明',
    '陕西省': '西安',
    '甘肃省': '兰州',
    '青海省': '西宁',
    '台湾省': '台北',
    '广西壮族自治区': '南宁',
    '内蒙古自治区': '呼和浩特',
    '西藏自治区': '拉萨',
    '宁夏回族自治区': '银川',
    '新疆维吾尔自治区': '乌鲁木齐',
    '香港特别行政区': '香港',
    '澳门特别行政区': '澳门'
  }
};

const option = {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter: (params: any) => {
      if (params.seriesType === 'scatter') {
        if (!params.value[2]) {
          return `${params.name}<br>${params.data.address}`;
        }
        if (params.name === '浙江杭州') {
          return `${params.name}<br/> ${params.value[2]}<br>${params.data.address}`;
        } else {
          return ` ${params.value[2]}<br/>${params.name}`;
        }
      }


      if (params.seriesType === 'map') {
        // 特殊处理海南诸岛
        if (params.name === '南海诸岛') { // 根据实际地图数据中的名称调整
          return '海南诸岛';
        }
        // 判断是否为直辖市
        if (provinceInfo.municipalities[params.name]) {
          return provinceInfo.municipalities[params.name];
        }

        // 显示普通省份及省会
        return `${params.name}<br>省会：${provinceInfo.capitals[params.name]}`;
      }

      return params.name;
    },
    textStyle: {fontSize: 16}
  },
  geo: {
    map: 'china',
    roam: false,
    layoutSize: '100%',
    center: [85.155, 35.2741],
    zoom: 1.5,
    label: {show: false},
    itemStyle: {
      areaColor: '#4B3627',
      borderColor: '#D79D3D',
      borderWidth: 1,
      shadowColor: 'rgba(215, 157, 61, 0.8)',
      shadowBlur: 30
    },
    emphasis: {
      itemStyle: {
        areaColor: '#6B4E3D',
        borderWidth: 2
      }
    }
  },
  series: [
    {
      type: 'map',
      map: 'china',
      geoIndex: 0,
      data: [],
      itemStyle: {areaColor: 'transparent'},
      emphasis: {itemStyle: {areaColor: 'transparent'}}
    },
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'circle',
      symbolSize: 9,
      itemStyle: {
        color: '#FF6600',
        borderColor: '#D79D3D',
        borderWidth: 2,
        opacity: 0.8
      },
      emphasis: {
        itemStyle: {
          color: '#FF4500',
          borderColor: '#8B0000',
          opacity: 1,
          scale: 1.2
        }
      },
      data: [
        {
          name: '浙江杭州',
          value: [120.155, 30.2741, '杭州致优知识产权有限公司'],
          address: '浙江省杭州市滨江区慧港科技园',
          itemStyle: {
            color: '#FF0000', borderColor: '#FF0000',
            emphasis: {
              color: '#FF0000',
              borderColor: '#FF0000'
            }
          }
        },
        {
          name: '静安区',
          value: [121.4474, 31.2270, '合作律所'],
          address: '上海市静安区常德路370号'
        },
        {
          name: '朝阳区',
          value: [116.4433, 39.9219, '合作律所'], // [经度, 纬度, 数值]
          address: '北京市朝阳区日坛北街33号'
        },
        {
          name: '深圳',
          value: [114.0596, 22.5429, '合作律所'],
          address: '广东省深圳市福田区福中三路'
        },
        {
          name: '莆田',
          value: [119.0078, 24.9936, '合作律所'],
          address: '福建省莆田市城厢区荔城中大道2169号'
        },
        {name: '宁波市', value: [121.5497, 29.8683, '合作律所'], address: '浙江省宁波市鄞州区宁东路901号'},
        {name: '哈尔滨市', value: [126.642464, 45.756966, '合作律所'], address: '黑龙江省哈尔滨市XX区XX路XX号'},
        {name: '长春市', value: [125.324501, 43.886841, '合作律所'], address: '吉林省长春市XX区XX路XX号'},
        {name: '沈阳市', value: [123.429092, 41.796768, '合作律所'], address: '辽宁省沈阳市XX区XX路XX号'},
        {name: '石家庄市', value: [114.502464, 38.045475, '合作律所'], address: '河北省石家庄市XX区XX路XX号'},
        {name: '兰州市', value: [103.834170, 36.061380, '合作律所'], address: '甘肃省兰州市XX区XX路XX号'},
        {name: '西宁市', value: [101.777820, 36.617290, '合作律所'], address: '青海省西宁市XX区XX路XX号'},
        {name: '西安市', value: [108.948021, 34.263161, '合作律所'], address: '陕西省西安市XX区XX路XX号'},
        {name: '郑州市', value: [113.665413, 34.757977, '合作律所'], address: '河南省郑州市XX区XX路XX号'},
        {name: '济南市', value: [117.000923, 36.675808, '合作律所'], address: '山东省济南市XX区XX路XX号'},
        {name: '青岛市', value: [120.3826, 36.0671, '合作律所'], address: '山东省青岛市市南区香港中路11号'},
        {name: '太原市', value: [112.549248, 37.857014, '合作律所'], address: '山西省太原市XX区XX路XX号'},
        {name: '合肥市', value: [117.283043, 31.861191, '合作律所'], address: '安徽省合肥市XX区XX路XX号'},
        {name: '武汉市', value: [114.298569, 30.584354, '合作律所'], address: '湖北省武汉市XX区XX路XX号'},
        {name: '长沙市', value: [112.982277, 28.19409, '合作律所'], address: '湖南省长沙市XX区XX路XX号'},
        {name: '南京市', value: [118.76741, 32.041546, '合作律所'], address: '江苏省南京市XX区XX路XX号'},
        {name: '苏州市', value: [120.5853, 31.2989, '合作律所'], address: '江苏省苏州市姑苏区三香路998号'},
        {name: '成都市', value: [104.065735, 30.659462, '合作律所'], address: '四川省成都市XX区XX路XX号'},
        {name: '贵阳市', value: [106.713478, 26.578342, '合作律所'], address: '贵州省贵阳市XX区XX路XX号'},
        {name: '昆明市', value: [102.71225, 25.040609, '合作律所'], address: '云南省昆明市XX区XX路XX号'},
        {name: '南昌市', value: [115.892151, 28.676493, '合作律所'], address: '江西省南昌市XX区XX路XX号'},
        {name: '广州市', value: [113.28064, 23.125177, '合作律所'], address: '广东省广州市XX区XX路XX号'},
        {name: '福州市', value: [119.306236, 26.075302, '合作律所'], address: '福建省福州市XX区XX路XX号'},
        {name: '泉州市', value: [118.6757, 24.8741, '合作律所'], address: '福建省泉州市丰泽区海星街100号'},
        {name: '南宁市', value: [108.320007, 22.82402, '合作律所'], address: '广西壮族自治区南宁市XX区XX路XX号'},
      ],
      rippleEffect: {
        brushType: 'stroke',
        scale: 4,
        period: 2
      }
    },
    {
      type: 'custom',
      coordinateSystem: 'geo',
      renderItem: (params, api) => {
        const hangzhouCoord = [120.155, 30.2741]; // 杭州坐标
        const point = api.coord(hangzhouCoord);

        // 气泡框参数
        const bubbleWidth = 210;
        const bubbleHeight = 60;
        const lineLength = 40; // 引导线长度

        // 计算终点坐标（气泡左侧中心）
        const endPoint = [
          point[0] + lineLength,  // 向右延伸
          point[1]                // 保持同一水平线
        ];

        return {
          type: 'group',
          children: [
            // 白色实线引导线
            {
              type: 'line',
              shape: {
                x1: point[0],
                y1: point[1],
                x2: endPoint[0],
                y2: endPoint[1]
              },
              style: {
                stroke: '#FFFFFF',
                lineWidth: 2,
                shadowColor: 'rgba(0,0,0,0.5)',
                shadowBlur: 8
              }
            },
            // 气泡框（左侧对齐引导线）
            {
              type: 'rect',
              shape: {
                x: endPoint[0],
                y: endPoint[1] - bubbleHeight / 2,
                width: bubbleWidth,
                height: bubbleHeight,
                r: 8
              },
              style: {
                fill: 'rgba(255,255,255,0.7)',
                shadowColor: 'rgba(0,0,0,0.3)',
                shadowBlur: 12
              }
            },
            // 气泡文字内容
            {
              type: 'text',
              style: {
                text: [
                  '{a|杭州致优知识产权有限公司}',
                  '{b|浙江省杭州市滨江区慧港科技园}'
                ].join('\n'),
                rich: {
                  a: {
                    fontFamily: 'AlibabaPuHuiTi_2_85_Bold',
                    fill: '#091631',
                    fontSize: 16,
                    lineHeight: 24
                  },
                  b: {
                    fontFamily: 'AlibabaPuHuiTi_2_65_Medium',
                    fill: '#6D6060',
                    fontSize: 14,
                    lineHeight: 20,
                    padding: [4, 0, 0, 0]  // 上右下左间距调整
                  }
                },
                x: endPoint[0] + 10, // 左侧留出20px边距
                y: endPoint[1] - bubbleHeight / 2 + 8,
                fill: '#FFFFFF',
                fontSize: 16,
                align: 'left',
                lineHeight: 24
              }
            }
          ]
        };
      },
      data: [0]
    }
  ],

};

onMounted(() => {
  chartInstance = echarts.init(chartContainer.value!);
  chartInstance.setOption(option);
  window.addEventListener('resize', () => chartInstance?.resize());
});

onBeforeUnmount(() => {
  chartInstance?.dispose();
  window.removeEventListener('resize', () => chartInstance?.resize());
});
</script>

<template>
  <div class="main-container">
    <!-- 新增固定导航栏 -->
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>

    <!-- 顶部背景区块 -->
    <div class="section section1">
      <img
          src="@/assets/images/location.png"
          class="section1-image"
          alt="主视觉图"
      >
      <span>保护营商环境&nbsp;&nbsp;助力知产强国</span>
    </div>

    <!-- 中间图文区块 -->
    <div class="section section2">
      <span class="profileChinese">公司简介</span>
      <span class="profile">profile</span>
      <span class="profileContent">
            知优云隶属杭州致优知识产权有限公司，是一家以
        <span class="profileContentText1">维权管控</span>
        为核心切入，立志成为集知产确权布局、知产维权管控、知产运营授权、知产管理权为一体的全链路知识产权法商服务平台。知优云以知产保护为核心，整合各类法律服务资源，降低维权管控成本和门槛，为权利人提供覆盖知识产权私力救济、调解救济、司法救济、行政救济、刑事救济的全维解决方案。由此让权利人重视前端确权布局的价值，促使侵权方寻找权利人获取正规授权，优化和净化营收环境，全面促进知识产权服务产业的蓬勃发展。知优云建立知识产权保护业务全流程的信息化管理系统，投入技术研发人工智能化自动检索和侵权分析系统，运用大数据技术为权利人提供多元化知产服务，打破传统知产代理服务的低价值维度，帮助权利人扩大知产授权和权利运用面，真正放大创新价值和保护知识财产，保护营商环境，助力知产强国！
      </span>
      <img src="@/assets/images/arrows.png" class="arrows">
      <img src="@/assets/images/mission.png" class="mission">
      <div ref="chartContainer" class="chart-container"></div>
      <!--      <div class="bubbling">-->
      <!--        <img src="@/assets/images/locator.png" class="locator">-->
      <!--        <span class="companyName">杭州致优知识产权有限公司</span>-->
      <!--        <span class="companyAddress">浙江省杭州市滨江区慧港科技园</span>-->
      <!--      </div>-->
      <!--      <img src="@/assets/images/bubllingPath.png" class="bubllingPath">-->
      <!--      <img src="@/assets/images/point.png" class="point">-->
      <!--      <span class="provinceCity">浙江杭州</span>-->
      <span class="advantageSpan1">2000+</span>
      <span class="advantageSpan2">签约品牌</span>
      <span class="advantageSpan3">50+</span>
      <span class="advantageSpan4">合作律所</span>
      <span class="advantageSpan5">10亿+</span>
      <span class="advantageSpan6">挽回损失</span>
    </div>
    <div class="section3and4">
      <div class="section section3">
        <span class="courseChinese">发展历程</span>
        <span class="course">development history</span>
        <div class="line"></div>
        <img src="@/assets/images/arrows.png" class="arrows2" @click="navigateTo('/zhiyouyun/aboutMe')" alt="箭头2">
        <div class="courseContain courseContain1">
          <span class="dateSpan dateSpan1">2018-2019</span>
          <span class="courseContainArrows1"> </span>
          <span class="contentSpan1">立志于净化电商市场环境，专注电商维权管控领域。</span>
        </div>
        <div class="courseContain courseContain2">
          <span class="dateSpan dateSpan2">2020-2021</span>
          <span class="courseContainArrows2"> </span>
          <span class="contentSpan2">签约100+家国内外知名品牌，以维权管控业务在行业内树立口碑和生根。</span>
        </div>
        <div class="courseContain courseContain3">
          <span class="dateSpan dateSpan3">2022</span>
          <span class="courseContainArrows3"> </span>
          <span class="contentSpan3">签约国内外知名品牌累计500+，业务量开枝散叶，营业收入增长达到惊人的300%。</span>
        </div>
        <div class="courseContain courseContain4">
          <span class="dateSpan dateSpan4">2023</span>
          <span class="courseContainArrows4"> </span>
          <span class="contentSpan4">明确“全链路知识产权法商服务平台”的发展定位，帮助权利人挽回经济损失以数亿计。</span>
        </div>
        <div class="courseContain courseContain5">
          <span class="dateSpan dateSpan5">2024</span>
          <span class="courseContainArrows5"> </span>
          <span class="contentSpan5">处理链接数量百万级，累计处理涉嫌低价、窜货、侵权、假货销售总额百亿级。</span>
        </div>
      </div>

      <div class="section section4">
        <span class="produceServiceChinese">产品服务</span>
        <span class="produceService">Produce Service</span>
        <img class="produceImg produceImg1" src="@/assets/images/produce1.png" alt="知优数字精灵"
             @click="navigateTo('/zhiyouyun/produceService/zyszjl')">
        <img class="produceImg produceImg2" src="@/assets/images/produce2.png" alt="渠道管控"
             @click="navigateTo('/zhiyouyun/produceService/channelControl')">
        <img class="produceImg produceImg3" src="@/assets/images/produce3.png" alt="知产保护"
             @click="navigateTo('/zhiyouyun/produceService/intellectualPropertyProtection')">
        <img class="produceImg produceImg4" src="@/assets/images/produce4.png" alt="确权布局"
             @click="navigateTo('/zhiyouyun/produceService/ownership')">
        <img class="produceImg produceImg5" src="@/assets/images/produce5.png" alt="授权管理"
             @click="navigateTo('/zhiyouyun/produceService/authorizeManage')">
      </div>
    </div>

    <div class="section section5">
      <span class="ServiceAdvantagesChinese">服务优势</span>
      <span class="ServiceAdvantages">Service advantages</span>
      <div class="ServiceAdvantagesContain">
        <div class="serviceAdvantagesSubContain1">
          <img class="serviceAdvantagesImg1" src="@/assets/serviceAdvantages/serviceAdvantages1.png" alt="全平台响应快">
          <span class="serviceAdvantagesTitle serviceAdvantagesTitle1">
            全平台响应快
          </span>
          <span class="serviceAdvantagesContent serviceAdvantagesContent1">
            全网100+处理平台，覆盖主流电商渠道，快速止损。
          </span>
        </div>
        <div class="serviceAdvantagesSubContain2">
          <img class="serviceAdvantagesImg2" src="@/assets/serviceAdvantages/serviceAdvantages2.png" alt="行业经验丰富">
          <span class="serviceAdvantagesTitle serviceAdvantagesTitle2">
            行业经验丰富
          </span>
          <span class="serviceAdvantagesContent serviceAdvantagesContent2">
            累计2000+个国内外合作品牌处理经验，沉淀8年以上的维权管控处理和流程，续签率90%以上。
          </span>
        </div>
        <div class="serviceAdvantagesSubContain3">
          <img class="serviceAdvantagesImg3" src="@/assets/serviceAdvantages/serviceAdvantages3.png" alt="售后服务好">
          <span class="serviceAdvantagesTitle serviceAdvantagesTitle3">
            售后服务好
          </span>
          <span class="serviceAdvantagesContent serviceAdvantagesContent3">
            行业领先的运营团队规模，维权管控、购买鉴定、数据分析、项目小组全程跟踪式服务，客户满意度95%以上。
          </span>
        </div>
        <div class="serviceAdvantagesSubContain4">
          <img class="serviceAdvantagesImg4" src="@/assets/serviceAdvantages/serviceAdvantages4.png" alt="技术团队牛">
          <span class="serviceAdvantagesTitle serviceAdvantagesTitle4">
            技术团队牛
          </span>
          <span class="serviceAdvantagesContent serviceAdvantagesContent4">
            10+年爬虫技术专家采用顶级爬虫技术抓取、清洗、汇总统计，可实现7*24小时定时定点高频抓取。
          </span>
        </div>
        <div class="serviceAdvantagesSubContain5">
          <img class="serviceAdvantagesImg5" src="@/assets/serviceAdvantages/serviceAdvantages5.png" alt="数据精准">
          <span class="serviceAdvantagesTitle serviceAdvantagesTitle5">
            数据精准
          </span>
          <span class="serviceAdvantagesContent serviceAdvantagesContent5">
            自主研发知数擎软件，可实现7*24小时价格、销量的监控和预警，可定时定点、到手价、细分SKU、SPU、优惠信息监测，分阶段、分授权监测。
          </span>
        </div>
        <div class="serviceAdvantagesSubContain6">
          <img class="serviceAdvantagesImg6" src="@/assets/serviceAdvantages/serviceAdvantages6.png" alt="公司实力强">
          <span class="serviceAdvantagesTitle serviceAdvantagesTitle6">
            公司实力强
          </span>
          <span class="serviceAdvantagesContent serviceAdvantagesContent6">
            全国50+战略合作律所和100+公证资源，自有调查团队，买手资源充足，熟悉平台规则、品牌市场的专精团队组建独立项目组，形成从线上侵权监测、在线固证、侵权处理到线下调查取证、司法打击、刑事打击、行政打击到全链路知产保护服务流程。
          </span>
        </div>
      </div>

    </div>
    <div class="section section6">
      <span class="zhiyouColumnChinese">知优专栏</span>
      <span class="zhiyouColumn">zhiyou Column</span>
      <img class="arrows3" src="@/assets/images/arrows.png" alt="箭头3" @click="navigateTo('/zhiyouyun/zhiyouColumn')">
      <div class="zhiyouColumnContainer zhiyouColumnContainer1">
        <div class="zhiyouColumnContainerImg zhiyouColumnContainerImg1">
          <img class="zhiyouColumnImg zhiyouColumnImg1" src="@/assets/images/zhiyouColumnImg1.png" alt="图片">
        </div>

        <p class="zhiyouColumnContainerTitle zhiyouColumnContainerTitle1">
          抖音快手商品sku价格信息采集
        </p>
        <p class="zhiyouColumnContainerContent zhiyouColumnContainerContent1">
          以下是目前可用于抖音和快手商品sku价格信息采集的工具和方法：抖音商品sku价…
        </p>
        <p class="zhiyouColumnContainerDate zhiyouColumnContainerDate1">
          2021-03-25
        </p>
        <div class="zhiyouColumnContainerArrows">
          <img src="@/assets/images/arrows.png" class="zhiyouColumnContainerArrows" alt="zhiyouColumnContainer2Arrows">
        </div>
        <div class="zhiyouColumnContainerBottom"></div>
      </div>
      <div class="zhiyouColumnContainer zhiyouColumnContainer2">
        <div class="zhiyouColumnContainerImg zhiyouColumnContainerImg2">
          <img class="zhiyouColumnImg zhiyouColumnImg2" src="@/assets/images/zhiyouColumnImg2.png" alt="图片">
        </div>

        <p class="zhiyouColumnContainerTitle zhiyouColumnContainerTitle2">
          抖音快手商品sku价格信息采集
        </p>
        <p class="zhiyouColumnContainerContent zhiyouColumnContainerContent2">
          以下是目前可用于抖音和快手商品sku价格信息采集的工具和方法：抖音商品sku价…
        </p>
        <p class="zhiyouColumnContainerDate zhiyouColumnContainerDate2">
          2021-03-25

        </p>
        <div class="zhiyouColumnContainerArrows">
          <img src="@/assets/images/arrows.png" class="zhiyouColumnContainerArrows" alt="zhiyouColumnContainer2Arrows">
        </div>
        <div class="zhiyouColumnContainerBottom"></div>
      </div>
      <div class="zhiyouColumnContainer zhiyouColumnContainer3">
        <div class="zhiyouColumnContainerImg zhiyouColumnContainerImg3">
          <img class="zhiyouColumnImg zhiyouColumnImg3" src="@/assets/images/zhiyouColumnImg3.png" alt="图片">
        </div>

        <p class="zhiyouColumnContainerTitle zhiyouColumnContainerTitle3">
          抖音快手商品sku价格信息采集
        </p>
        <p class="zhiyouColumnContainerContent zhiyouColumnContainerContent3">
          以下是目前可用于抖音和快手商品sku价格信息采集的工具和方法：抖音商品sku价…
        </p>
        <p class="zhiyouColumnContainerDate zhiyouColumnContainerDate3">
          2021-03-25
        </p>
        <div class="zhiyouColumnContainerArrows">
          <img src="@/assets/images/arrows.png" class="zhiyouColumnContainerArrows" alt="zhiyouColumnContainer2Arrows">
        </div>
        <div class="zhiyouColumnContainerBottom"></div>
      </div>
      <div class="zhiyouColumnContainer zhiyouColumnContainer4">
        <div class="zhiyouColumnContainerImg zhiyouColumnContainerImg4">
          <img class="zhiyouColumnImg zhiyouColumnImg4" src="@/assets/images/zhiyouColumnImg4.png" alt="图片">
        </div>

        <p class="zhiyouColumnContainerTitle zhiyouColumnContainerTitle4">
          抖音快手商品sku价格信息采集
        </p>
        <p class="zhiyouColumnContainerContent zhiyouColumnContainerContent4">
          以下是目前可用于抖音和快手商品sku价格信息采集的工具和方法：抖音商品sku价…
        </p>
        <p class="zhiyouColumnContainerDate zhiyouColumnContainerDate4">
          2021-03-25
        </p>
        <div class="zhiyouColumnContainerArrows">
          <img src="@/assets/images/arrows.png" class="zhiyouColumnContainerArrows" alt="zhiyouColumnContainer2Arrows">
        </div>
        <div class="zhiyouColumnContainerBottom"></div>
      </div>
      <span class="leftArrowsButton"> < </span>
      <span class="rightArrowsButton"> > </span>
      <!--      <img class="leftArrowsButton" src="@/assets/images/leftArrowsButton.png" alt="左按钮">-->
      <!--      <img class="rightArrowsButton" src="@/assets/images/rightArrowsButton.png" alt="右按钮">-->
    </div>

    <div class="section section7">
      <span class="corporateCultureChinese">企业文化</span>
      <span class="corporateCulture">corporate culture</span>
      <div class="corporateCultureContainer1">
        <span class="corporateCultureTitle corporateCultureTitle1">
          使命
        </span>
        <span class="corporateCultureContent corporateCultureContent1">
          保护知产环境 助力知产强国
        </span>
      </div>
      <div class="corporateCultureContainer2">
        <span class="corporateCultureTitle corporateCultureTitle2">
          愿景
        </span>
        <span class="corporateCultureContent corporateCultureContent2">
          成为中国首选的全链路知识产权法商服务平台
        </span>
      </div>
      <div class="corporateCultureContainer3">
        <span class="corporateCultureTitle corporateCultureTitle3">
          价值观
        </span>
        <span class="corporateCultureContent corporateCultureContent3">
          客户第一 服务至上    行有不得 反求诸己
          积极应变 容错创新    此时此刻 舍我其谁
          简单信任 合作共赢    全力以赴 水滴石穿
        </span>
      </div>
    </div>
    <div class="section section8">
      <span class="cooperativePartnerChinese">合作伙伴</span>
      <span class="cooperativePartner">Cooperative partner</span>
      <div class="cooperativePartnerImgContainer">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg1.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg2.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg3.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg4.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg5.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg6.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg7.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg8.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg9.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg10.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg11.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg12.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg13.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg14.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg15.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg16.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg17.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg18.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg19.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg20.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg21.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg22.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg23.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg24.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg25.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg26.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg27.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
        <img src="@/assets/cooperativePartnerImg/cooperativePartnerImg28.png" class="cooperativePartnerImg"
             alt="cooperativePartnerImg">
      </div>
    </div>
    <bottom/>
  </div>
</template>

<style scoped>


.chart-container {
  width: 100%;
  height: 930px;
  position: absolute;
  top: 20px;
  /* right: 80px; */
  z-index: 1;
}

body {
  max-width: 1920px; /* 按设计稿最大尺寸设置 */
  margin: 0 auto; /* 居中显示 */
  width: 100%;
}

.main-container {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */

}


.section {
  width: 100%;
  background-size: cover;
  background-position: center;
}

.section1 {

  height: 880px;
  width: 100%; /* 确保宽度100% */
  background-image: url('@/assets/bk/section1.png'); /* 替换为实际图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.section1-image {
  position: absolute;
  top: 290px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1200px;
  z-index: 2;
}

.section1 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 50px;
  line-height: 60px;
  white-space: nowrap;
  z-index: 3;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(255, 67, 0, 0.4); /* 增强阴影效果 */

}

.section2 {
  height: 930px;
  background-color: #101010;
  background-size: cover;
  background-position: center;
  background-blend-mode: normal; /* 修改为normal取消混合效果 */
  position: relative;
}

.profileChinese {
  position: absolute;
  top: 88px;
  left: 360px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.profile {
  position: absolute;
  top: 110px;
  left: 360px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.profileContent {
  position: absolute;
  width: 716px;
  height: 330px;
  top: 196px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 21.5px;
  line-height: 30px;
  font-weight: normal;
}

.profileChinese,
.profile,
.profileContent {
  position: absolute;
  z-index: 2; /* 文字内容保持更高层级 */
}

.profileContentText1 {
  color: #ff6600;
}

.arrows {
  position: absolute;
  width: 80px;
  height: 24px;
  top: 542px;
  left: 360px;
  filter: brightness(0) invert(1); /* 将图片颜色变为白色 */
}

.mission {
  position: absolute;
  top: 592px;
  left: 360px;
}


.advantageSpan1 {
  position: absolute;
  top: 714px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 60px;
  line-height: 84px;
  color: #FFFFFF;
  font-weight: bold;
}

.advantageSpan2 {
  position: absolute;
  top: 800px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  /* font-weight: bold; */
}

.advantageSpan3 {
  position: absolute;
  top: 714px;
  left: 576px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 60px;
  line-height: 84px;
  color: #FFFFFF;
  font-weight: bold;
}

.advantageSpan4 {
  position: absolute;
  top: 800px;
  left: 578px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  /* font-weight: bold; */
}

.advantageSpan5 {
  position: absolute;
  top: 714px;
  left: 729px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 60px;
  line-height: 84px;
  color: #FFFFFF;
  font-weight: bold;
}

.advantageSpan6 {
  position: absolute;
  top: 800px;
  left: 729px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  /* font-weight: bold; */
}

.section3and4 {
  width: 100%;
  height: 1114px;
  background-color: #101010;
  background-image: url('@/assets/bk/section4.png');
  background-size: auto; /* 按图片原始尺寸显示 */
  background-position: center 254px; /* 图片居中 */
  background-repeat: no-repeat;
}

.section3 {
  /* width: 1920px; */
  height: 550px;
  /* background-color: #101010; */
  /* background-size: cover;
  background-position: center; */
  position: relative;
}

.courseChinese {
  position: absolute;
  top: 50px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.course {
  position: absolute;
  top: 72px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 30px;
  line-height: 42px;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-weight: bold;


}

.arrows2 {
  position: absolute;
  left: 1480px;
  top: 72px;
  filter: brightness(0) invert(1); /* 将图片颜色变为白色 */
}


.line {
  position: absolute;
  top: 260px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #FF6600;
}

.courseContain:hover {
  background: linear-gradient(180deg, rgba(255, 102, 0, 0.2) 0%, rgba(255, 102, 0, 0.04) 100%);
  border: 1px solid #FF6600;
}

.courseContain1 {
  position: absolute;
  top: 175px;
  left: 361px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;

  /* position: relative; */
}

.courseContainArrows1 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.dateSpan {
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 18px;

}

.dateSpan1 {
  position: absolute;
  color: #FF6600;
  width: 160px;
  left: 110px;
  transform: translateX(-50%);
}

.contentSpan1 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.courseContain2 {
  position: absolute;
  top: 175px;
  left: 603px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan2 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 160px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows2 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan2 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}


.courseContain3 {
  position: absolute;
  top: 175px;
  left: 845px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan3 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 147px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows3 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan3 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.courseContain4 {
  position: absolute;
  top: 175px;
  left: 1087px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan4 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 147px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows4 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan4 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.courseContain5 {
  position: absolute;
  top: 175px;
  left: 1329px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan5 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 147px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows5 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan5 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.section4 {
  width: 100%;
  height: 564px;
  /* background-color: #101010; */
  /* background-image: url('@/assets/bk/section4.png'); */
  /* background-size: cover;
  background-position: center; */
  /* background-repeat: no-repeat; */
  /* background-blend-mode: normal; /* 修改为normal取消混合效果 */
  position: relative;
  /* border: #FF6600 solid 1px; */

}

.produceServiceChinese {
  position: absolute;
  top: 70px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.produceService {
  position: absolute;
  top: 92px;
  left: 847px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.produceImg:hover {
  top: 162px;
}

.produceImg1 {
  position: absolute;
  top: 174px;
  left: 360px;
  width: 230px; /* 可根据实际图片尺寸调整 */
  height: auto;
}

.produceImg2 {
  position: absolute;
  top: 174px;
  left: 600px; /* 根据实际布局调整 */
  width: 230px;
  height: auto;
}

.produceImg3 {
  position: absolute;
  top: 174px;
  left: 840px;
  width: 230px;
  height: auto;
}

.produceImg4 {
  position: absolute;
  top: 174px;
  left: 1080px;
  width: 230px;
  height: auto;
}

.produceImg5 {
  position: absolute;
  top: 174px;
  left: 1320px;
  width: 230px;
  height: auto;
}


.section5 {
  width: 100%;
  height: 1000px;
  background-color: #101010;
  position: relative;
  /* border: #FF6600 solid 1px; */
}

.ServiceAdvantagesChinese {
  position: absolute;
  top: 50px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.ServiceAdvantages {
  position: absolute;
  top: 72px;
  left: 817px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}


.ServiceAdvantagesContain {
  width: 1200px;
  height: 776px;
  border-radius: 32px;
  top: 156px;
  left: 360px;
  position: relative;
  background-image: url('@/assets/bk/ServiceAdvantagesContainbk.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.serviceAdvantagesImg1 {
  position: absolute;
  top: 72px;
  left: 72px;
  width: 40px;
  height: auto;
}

.serviceAdvantagesImg2 {
  position: absolute;
  top: 72px;
  left: 616px;
  width: 40px;
  height: auto;
}

.serviceAdvantagesImg3 {
  position: absolute;
  top: 272px;
  left: 72px;
  width: 40px;
  height: auto;
}

.serviceAdvantagesImg4 {
  position: absolute;
  top: 272px;
  left: 616px;
  width: 40px;
  height: auto;
}

.serviceAdvantagesImg5 {
  position: absolute;
  top: 472px;
  left: 72px;
  width: 40px;
  height: auto;
}

.serviceAdvantagesImg6 {
  position: absolute;
  top: 472px;
  left: 616px;
  width: 40px;
  height: auto;
}

.serviceAdvantagesTitle {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
}

.serviceAdvantagesTitle1 {
  position: absolute;
  top: 72px;
  left: 124px;
}

.serviceAdvantagesTitle2 {
  position: absolute;
  top: 72px;
  left: 668px;
}

.serviceAdvantagesTitle3 {
  position: absolute;
  top: 272px;
  left: 124px;
}

.serviceAdvantagesTitle4 {
  position: absolute;
  top: 272px;
  left: 668px;
}

.serviceAdvantagesTitle5 {
  position: absolute;
  top: 472px;
  left: 124px;
}

.serviceAdvantagesTitle6 {
  position: absolute;
  top: 472px;
  left: 668px;
}

.serviceAdvantagesContent {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #B4B4B4;
}

.serviceAdvantagesContent1 {
  position: absolute;
  top: 124px;
  left: 124px;
  width: 460px;
  height: 60px;
}

.serviceAdvantagesContent2 {
  position: absolute;
  top: 124px;
  left: 668px;
  width: 460px;
  height: 90px;
}

.serviceAdvantagesContent3 {
  position: absolute;
  top: 324px;
  left: 124px;
  width: 460px;
  height: 90px;
}

.serviceAdvantagesContent4 {
  position: absolute;
  top: 324px;
  left: 668px;
  width: 460px;
  height: 90px;
}

.serviceAdvantagesContent5 {
  position: absolute;
  top: 524px;
  left: 124px;
  width: 460px;
  height: 120px;
}

.serviceAdvantagesContent6 {
  position: absolute;
  top: 524px;
  left: 668px;
  width: 460px;
  height: 180px;
}


.section6 {
  width: 100%;
  height: 760px;
  background-color: #101010;
  position: relative;
  /* border: #FF6600 solid 1px; */
}

.zhiyouColumnChinese {
  position: absolute;
  top: 10px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.zhiyouColumn {
  position: absolute;
  top: 32px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.arrows3 {
  position: absolute;
  left: 1480px;
  top: 32px;
  filter: brightness(0) invert(1); /* 将图片颜色变为白色 */
}

.zhiyouColumnContainer:hover {
  top: 102px;
}

.zhiyouColumnContainer1 {
  width: 380px;
  height: 497px;
  border-radius: 20px 0px 20px 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 122px;
  left: 360px;
}

.zhiyouColumnContainer2 {
  width: 380px;
  height: 497px;
  border-radius: 20px 0px 20px 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 122px;
  left: 764px;
}


.zhiyouColumnContainer3 {
  width: 380px;
  height: 497px;
  border-radius: 20px 0px 20px 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 122px;
  left: 1168px;
}

.zhiyouColumnContainer4 {
  width: 348px;
  height: 497px;
  border-radius: 20px 0px 20px 20px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 122px;
  left: 1572px;
  /* overflow: hidden; */
}

.zhiyouColumnContainerImg {
  width: 380px;
  height: 320px;
  border-radius: 20px 0 0 0; /* 左上角20px圆角，其他角直角 */
  overflow: hidden; /* 确保图片不会超出容器 */
}

.zhiyouColumnImg {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片等比例缩放填充整个容器 */
  display: block; /* 消除图片底部间隙 */
}

.zhiyouColumnImg4 {

}

.zhiyouColumnContainerTitle {
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 23.5px;
  line-height: 33px;
  /* text-align: justify; */
  font-style: normal;
  color: #171717;
  width: 332px;
  height: 33px;
  left: 24px;
  top: 344px;
  font-weight: bold;

}


.zhiyouColumnContainerContent {
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 17.5px;
  line-height: 25px;
  font-style: normal;
  text-align: justify;
  color: #878787;
  width: 332px;
  height: 50px;
  left: 24px;
  top: 385px;
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  display: -webkit-box; /* 使用弹性盒子布局 */
  -webkit-line-clamp: 2; /* 限制显示行数 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}

.zhiyouColumnContainerDate {
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 21.5px;
  line-height: 30px;
  color: #171717;
  font-style: normal;
  text-align: justify;
  width: 132px;
  height: 30px;
  left: 24px;
  top: 443px;
}

.zhiyouColumnContainerTitle {
  transition: inherit; /* 继承父级过渡效果 */
}

.zhiyouColumnContainerDate {
  transition: inherit; /* 继承父级过渡效果 */
}

.zhiyouColumnContainer:hover .zhiyouColumnContainerTitle {
  color: #FF6600;
}

.zhiyouColumnContainer:hover .zhiyouColumnContainerDate {
  color: #FF6600;
}

.zhiyouColumnContainerArrows {
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

.zhiyouColumnContainer:hover .zhiyouColumnContainerArrows {
  opacity: 1; /* 鼠标悬停时显示 */
  position: absolute;
  width: 56px;
  height: 16px;
  right: 24px;
  bottom: 14px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(110%) saturate(800%) hue-rotate(0deg);

}

.zhiyouColumnContainer:hover .zhiyouColumnContainerBottom {
  position: absolute;
  width: 100%;
  height: 20px;
  bottom: 0;
  left: 0;
  border-radius: 0px 0px 20px 20px;
  background: linear-gradient(270deg, #FF6600 0%, #FFB23D 100%);
}


.leftArrowsButton {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 659px; /* 与专栏容器顶部对齐 */
  left: 892px; /* 左侧位置 */
  border: #FFFFFF 1px solid;
  border-radius: 24px;
  color: #FF6600;
  font-size: 34px;
  text-align: center;
}

.leftArrowsButton:hover {
  border: #FF6600 1px solid;
  color: #FFFFFF;
  background-color: #FF6600;
}

.rightArrowsButton {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 659px; /* 与专栏容器顶部对齐 */
  left: 980px; /* 左侧位置 */
  border: #FFFFFF 1px solid;
  border-radius: 24px;
  color: #FF6600;
  font-size: 34px;
  text-align: center;
}

.rightArrowsButton:hover {
  border: #FF6600 1px solid;
  color: #FFFFFF;
  background-color: #FF6600;
}


.section7 {
  width: 100%;
  height: 432px;
  background-color: #101010;
  background-image: url('@/assets/bk/section7.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.corporateCultureChinese {
  position: absolute;
  top: 40px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.corporateCulture {
  position: absolute;
  top: 62px;
  left: 817px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.corporateCultureContainer1 {
  position: absolute;
  width: 588px;
  height: 92px;
  background-image: url('@/assets/images/corporateCultureContainerbk1.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 144px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
}

.corporateCultureContainer2 {
  position: absolute;
  width: 588px;
  height: 92px;
  background-image: url('@/assets/images/corporateCultureContainerbk1.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 260px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
}

.corporateCultureContainer3 {
  position: absolute;
  width: 588px;
  height: 208px;
  background-image: url('@/assets/images/corporateCultureContainerbk2.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 144px; /* 距离父容器顶部距离 */
  left: 972px; /* 距离父容器左边距离 */
}

.corporateCultureTitle {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 32px;
  line-height: 45px;
  color: #FFFFFF;
  font-style: normal;
  font-weight: 400;
}

.corporateCultureTitle1 {
  position: absolute;
  top: 24px;
  left: 24px;
}

.corporateCultureTitle2 {
  position: absolute;
  top: 24px;
  left: 24px;
}

.corporateCultureTitle3 {
  position: absolute;
  top: 82px;
  left: 32px;
}

.corporateCultureContent {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
  font-weight: 200;
}

.corporateCultureContent1, .corporateCultureContent2 {
  position: absolute;
  top: 31px;
  left: 104px;
  width: 452px;
  height: 30px;
}

.corporateCultureContent3 {
  position: absolute;
  top: 26px;
  left: 152px;
  width: 382px;
  height: 156px;
  line-height: 52px;
}


.section8 {
  width: 100%;
  height: 668px;
  background-color: #101010;
  background-image: url('@/assets/bk/section8.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.cooperativePartnerChinese {
  position: absolute;
  top: 80px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.cooperativePartner {
  position: absolute;
  top: 102px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.cooperativePartnerImgContainer {
  position: absolute;
  width: 1204px;
  height: 390px;
  top: 212px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
  /* border: #FF6600 solid 1px; */
}

.cooperativePartnerImg {
  width: 166px;
  height: 88px;
  object-fit: contain;
  margin-right: 6px;
  margin-bottom: 8px;
}


</style>